import React, { useEffect, useRef } from 'react';
import RelationGraph from 'relation-graph/react';
import type { RGJsonData, RGNode, RGLine, RGLink, RGUserEvent, RGOptions, RelationGraphComponent } from 'relation-graph/react';


const MultiGroup2 = () => {
  const graphRef = useRef<RelationGraphComponent | null>(null);
  const graphOptions: RGOptions = {
    backgroundImageNoRepeat: true,
    moveToCenterWhenRefresh: true,
    zoomToFitWhenRefresh: true,
    useAnimationWhenExpanded: true,
    placeOtherGroup: true,
    defaultNodeWidth: 150,
    defaultNodeHeight: 30,
    debug: false,
    showDebugPanel: false,
    layout: {
      label: '树状',
      layoutName: 'tree',
      from: 'left',
      layoutClassName: 'seeks-layout-center',
    }
  };

  useEffect(() => {
    showGraph();
  }, []);

  const showGraph = async () => {
    const __graph_json_data: RGJsonData = {
      "rootId": "2",
      "nodes": [
        { "id": "2", "text": "ALTXX" },
        { "id": "3", "text": "CH2 TTN" },
        { "id": "single-1", "text": "Single 1" },
        { "id": "single-2", "text": "Single 2" },
        { "id": "4", "text": "CH1 AlCu" },
        { "id": "5", "text": "MainFrame" },
        { "id": "6", "text": "TestMainSys" },
        { "id": "7", "text": "汽车部件" },
        { "id": "8", "text": "汽车工艺" },
        { "id": "9", "text": "过程质检" },
        { "id": "10", "text": "卓立制造" },
        { "id": "11", "text": "压电开关" },
        { "id": "12", "text": "电子产品" },
        { "id": "13", "text": "集成电路" },
        { "id": "14", "text": "ArHigh" },
        { "id": "15", "text": "ArLow" },
        { "id": "16", "text": "ShowerHead" },
        { "id": "17", "text": "CrypoPump" },
        { "id": "18", "text": "DryPump" },
        { "id": "19", "text": "Ti Target" },
        { "id": "20", "text": "N2" },
        { "id": "21", "text": "Shutter" },
        { "id": "22", "text": "Cool Chbr" },
        { "id": "23", "text": "Transfer Chbr" },
        { "id": "24", "text": "Alignment Unit" },
        { "id": "25", "text": "齿轮箱" },
        { "id": "26", "text": "车门内部人工涂蜡" },
        { "id": "27", "text": "原材料检验" },
        { "id": "28", "text": "地板RTV硅胶密封" },
        { "id": "29", "text": "热保护焊接" },
        { "id": "30", "text": "电热管导线焊接" },
        { "id": "31", "text": "温控器安装" },
        { "id": "32", "text": "蒸汽硅胶座配装" },
        { "id": "33", "text": "温度调试" },
        { "id": "34", "text": "压电开关的模型塑料外壳" },
        { "id": "35", "text": "安装开关" },
        { "id": "36", "text": "ASIC IC" },
        { "id": "37", "text": "SENSOR" },
        { "id": "38", "text": "CON" },
        { "id": "39", "text": "Flash" },
        { "id": "40", "text": "Flite" }
      ],
      "lines": [
        { "from": "2", "to": "5", "text": "子系统" },
        { "from": "2", "to": "3", "text": "子系统" },
        { "from": "2", "to": "4", "text": "子系统" },
        { "from": "3", "to": "21", "text": "子系统" },
        { "from": "3", "to": "20", "text": "子系统" },
        { "from": "3", "to": "19", "text": "子系统" },
        { "from": "4", "to": "18", "text": "子系统" },
        { "from": "4", "to": "17", "text": "子系统" },
        { "from": "4", "to": "16", "text": "子系统" },
        { "from": "4", "to": "15", "text": "子系统" },
        { "from": "4", "to": "14", "text": "子系统" },
        { "from": "5", "to": "24", "text": "子系统" },
        { "from": "5", "to": "23", "text": "子系统" },
        { "from": "5", "to": "22", "text": "子系统" },
        { "from": "6", "to": "13", "text": "子系统" },
        { "from": "6", "to": "12", "text": "子系统" },
        { "from": "6", "to": "11", "text": "子系统" },
        { "from": "6", "to": "9", "text": "子系统" },
        { "from": "6", "to": "8", "text": "子系统" },
        { "from": "6", "to": "7", "text": "子系统" },
        { "from": "7", "to": "25", "text": "子系统" },
        { "from": "8", "to": "26", "text": "子系统" },
        { "from": "9", "to": "27", "text": "子系统" },
        { "from": "10", "to": "33", "text": "子系统" },
        { "from": "10", "to": "32", "text": "子系统" },
        { "from": "10", "to": "31", "text": "子系统" },
        { "from": "10", "to": "30", "text": "子系统" },
        { "from": "10", "to": "29", "text": "子系统" },
        { "from": "10", "to": "28", "text": "子系统" },
        { "from": "11", "to": "35", "text": "子系统" },
        { "from": "11", "to": "34", "text": "子系统" },
        { "from": "12", "to": "39", "text": "子系统" },
        { "from": "12", "to": "38", "text": "子系统" },
        { "from": "12", "to": "37", "text": "子系统" },
        { "from": "12", "to": "36", "text": "子系统" },
        { "from": "13", "to": "40", "text": "子系统" }
      ]
    };

    const graphInstance = graphRef.current!.getInstance();
    if (graphInstance) {
      await graphInstance.setJsonData(__graph_json_data);
      await graphInstance.refresh();
    }
  };

  const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    console.log('onNodeClick:', nodeObject);
  };

  const onLineClick = (lineObject: RGLine, linkObject: RGLink, $event: RGUserEvent) => {
    console.log('onLineClick:', lineObject);
  };

  return (
    <div>
      <div style={{ height: '100vh' }}>
        <RelationGraph ref={graphRef} options={graphOptions} onNodeClick={onNodeClick} onLineClick={onLineClick} />
      </div>
    </div>
  );
};

export default MultiGroup2;
